﻿
@{
    ViewData["Title"] = "商品管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="title">商品类别</div>
                <div class="content">
                    <p style="margin: 10px 15px;">
                        <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
                    </p>
                    <p style="margin: 10px 15px;" id="F_Edit">
                        <a href="/Goods/GoodsEdit" class="mui-btn mui-btn-success mui-btn-block" style="padding: 5px 20px;">新增商品</a>
                    </p>
                </div>
                <div class="mui-card">
                    <ul class="mui-table-view mui-table-view-chevron">
                        <li class="mui-table-view-cell">
                            商品类别
                        </li>
                        @foreach (var item in ViewBag.GoodsClass)
                        {

                            @if (item.GdClass.Count > 0)
                            {
                                <li class="mui-table-view-cell mui-collapse">
                                    <a class="mui-navigate-right" href="#">@item.ClassName</a>
                                    <ul class="mui-table-view mui-table-view-chevron">
                                        @foreach (var item2 in item.GdClass)
                                        {
                                            <li class="mui-table-view-cell">
                                                <a class="mui-navigate-right" href="/Goods/GoodsManage/@item2.Id">@item2.ClassName</a>
                                            </li>
                                        }
                                    </ul>
                                </li>
                            }
                            else
                            {
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" href="/Goods/GoodsManage/@item.Id">@item.ClassName</a>
                                </li>
                            }

                        }
                    </ul>
                </div>
            </div>
        </div>
    </aside>
    <div class="mui-inner-wrap">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
            <a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
            <h1 class="mui-title">商品管理</h1>
        </header>
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="mui-input-row mui-search">
                    <input type="search" class="mui-input-clear" placeholder="">
                </div>
                <div class="title">
                    右侧带导航箭头
                </div>
                <ul class="mui-table-view mui-table-view-chevron">
                    @for (int i = 0; i < 30; i++)
                    {
                        <li class="mui-table-view-cell mui-media">
                            <a class="mui-navigate-right" href="/Goods/GoodsEdit?Id=@i">
                                <img class="mui-media-object mui-pull-left" src="/images/cbd.jpg">
                                <div class="mui-media-body">
                                    CBD
                                    <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                                </div>
                            </a>
                        </li>
                    }
                </ul>
            </div>
        </div>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<script>
    mui.init({
        swipeBack: false,
    });
    //侧滑容器父节点
    var offCanvasWrapper = mui('#offCanvasWrapper');
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");
    //移动效果是否为整体移动
    var moveTogether = false;
    //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
    var classList = offCanvasWrapper[0].classList;
    document.getElementById('offCanvasHide').addEventListener('tap', function () {
        offCanvasWrapper.offCanvas('close');
    });
    //主界面和侧滑菜单界面均支持区域滚动；
    mui('#offCanvasSideScroll').scroll();
    mui('#offCanvasContentScroll').scroll();
    mui('#F_Edit').on('tap', 'a', function () {
        // 获取地址
        var href = this.getAttribute('href');
        location.href = href;
    });
</script>

